<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :fanhui="true">
		</cu-custom>
		<view class="row">
			<icon type='search' />
			<input class="input" @input="searchData" placeholder='输入文章内容' focus auto-focus></input>
		</view>
		<scroll-view scroll-y class="swiperStyle">
			<view class="cu-list menu-avatar">

				<view class="list-box" v-for="(sear,index) in collectionList" :key="index" :data-ida="sear.id" :data-id="sear.policyDetailsId"
				 :data-date="sear.publishTime" :data-tit="sear.title" @tap="getContent">
					<view class="list-content">
						<view class="list-inner">
							<view class="header">
								<view class="header-title" scroll-y="true">
										{{ sear.title }}
								</view>
								<view class="header-img">
									<view class="img-box">
										<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.gtimg.com%2Fqd_house%2Fpics%2Fhv1%2F72%2F216%2F145%2F9483777.jpg&refer=http%3A%2F%2Fimg1.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611990887&t=df43f7a52fcc771cb9fd66cfff49a226"
										 mode="" class="img"></image>
									</view>
								</view>
							</view>
							<view class="footer">
								<view class="footer-type">类型：{{ sear.type }}</view>
								<view class="footer-time">时间：{{ sear.publishTime }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				length: 10,
				collectionList: []
			}
		},
		methods: {
			searchData(e) {
				// console.log(e.detail.value)
				
				var data = {
					 title: e.detail.value,
					 pageNo: 1,
				}
				this.http.getaction('/policyexe/getTitle', data)
					.then(res => {
						var s = JSON.stringify(res)
						this.collectionList = res.data.result.records
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style>
	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 90upx;
		background: #ffffff;
	}

	.input {
		padding-left: 10px;
	}

	.swiperStyle {
		height: 100%;
	}

	.loadmore {
		text-align: center;
		color: #AAAAAA;
		height: 30upx;
	}

	.loadmore {
		text-align: center;
		color: #AAAAAA;
		padding: 10upx;
	}

	.hiden {
		display: none;
	}

	.list-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.list-content {
		height: 320upx;
		width: 100%;
		background-color: #FFFFFF;
		margin-bottom: 25upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list-inner {
		width: 94%;
		height: 280upx;
	}

	.header {
		width: 100%;
		height: 230upx;

		display: flex;
		justify-content: space-between;
	}

	.header-title{
		width: 60%;
		height: 180upx;
/* 		line-height: 40upx; */
		overflow: hidden;
		line-height: 60upx;
		font-size: 38upx;
		font-weight: 600;
	}


	.header-img {
		width: 38%;
		height: 230upx;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.img-box {
		width: 100%;
		height: 210upx;
		background-color: #FFFFFF;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.footer {
		width: 100%;
		height: 50upx;
		display: flex;
		justify-content: space-between;
	}

	.footer-type {
		color: #8799A3;
	}

	.footer-time {
		color: #8799A3;
	}
</style>
